<template>
    <div class="user-form">
      <h2>{{ isEditing ? '修改用户信息' : '新用户注册' }}</h2>
      <form @submit.prevent="submitForm">
        <div class="form-group">
          <label>用户名：</label>
          <input 
            v-model="formData.userName" 
            type="text" 
            required 
            placeholder="输入用户名："
            :disabled="submitting"
          >
        </div>
        <div class="form-group">
          <label>邮箱：</label>
          <input 
            v-model="formData.email" 
            type="email" 
            required 
            placeholder="输入邮箱地址："
            :disabled="submitting"
          >
        </div>
        <div class="form-group">
          <label>电话号码：</label>
          <input 
            v-model="formData.phone" 
            type="tel" 
            placeholder="输入电话号码："
            :disabled="submitting"
          >
        </div>
        <div class="form-group">
          <label>密码：</label>
          <input 
            v-model="formData.password" 
            type="password" 
            placeholder="输入密码："
            :disabled="submitting"
          >
        </div>
        
        <div v-if="error" class="error-message">
          {{ error }}
        </div>
        
        <div class="form-actions">
          <button 
            type="submit" 
            :disabled="submitting"
          >
            {{ submitting 
              ? (isEditing ? 'Updating...' : 'Adding...') 
              : (isEditing ? '更新' : '增加') 
            }}
          </button>
          <router-link to="/" class="cancel-btn">Cancel</router-link>
        </div>
      </form>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { UserService } from '@/services/userService';
  
  const route = useRoute();
  const router = useRouter();
  
  const isEditing = ref(false);
  const error = ref(null);
  const submitting = ref(false);
  const formData = ref({
    userName: '',
    email: '',
    phone: '',
    password:''
  });
  
  const submitForm = async () => {
    error.value = null;
    submitting.value = true;
    
    try {
      if (isEditing.value) {
        await UserService.updateUser(route.params.id, formData.value);
      } else {
        await UserService.createUser(formData.value);
      }
      router.push('/');
    } catch (err) {
      error.value = err.response?.data?.message || 
        (isEditing.value 
          ? 'Failed to update user. Please try again.' 
          : 'Failed to create user. Please check your inputs.');
    } finally {
      submitting.value = false;
    }
  };
  
  onMounted(async () => {
    if (route.params.id) {
      isEditing.value = true;
      try {
        const user = await UserService.getUserById(route.params.id);
        formData.value = { 
          userName: user.userName, 
          email: user.email, 
          phone: user.phone,
          password: user.password 
        };
      } catch (err) {
        error.value = 'Failed to load user data';
      }
    }
  });
  </script>
  
  <style scoped>
  .user-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  .form-group label {
    display: block;
    margin-bottom: 5px;
  }
  
  .form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  .error-message {
    color: red;
    margin-bottom: 15px;
  }
  
  .form-actions {
    display: flex;
    gap: 10px;
  }
  
  button {
    padding: 10px 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
  }
  
  button:disabled {
    background-color: #cccccc;
  }
  
  .cancel-btn {
    padding: 10px 15px;
    background-color: #f44336;
    color: white;
    text-decoration: none;
    border-radius: 4px;
  }
  </style>